<template>
  <div
    class="issp-launcher aa"
    :class="{ opened: isOpen }"
    :style="{ backgroundColor: colors.launcher.bg }"
  >
    <div v-if="newMessagesCount > 0 && !isOpen" class="new-messsages-count">
      {{ newMessagesCount }}
    </div>
    <img
      v-if="isOpen"
      class="open-icon"
      :src="icons.open.img"
      :alt="icons.open.name"
    />
    <img
      v-else
      class="closed-icon"
      :src="icons.close.img"
      :alt="icons.close.name"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CloseIcon from "@/assets/close-icon.svg";
import OpenIcon from "@/assets/open-icon.svg";

defineOptions({
  name: "ChatLauncher",
});

const isOpen = ref(true);

const newMessagesCount = ref(4);

const icons = {
  open: {
    img: OpenIcon,
    name: "default",
  },
  close: {
    img: CloseIcon,
    name: "default",
  },
};

const colors = {
  header: {
    bg: "#4e8cff",
    text: "#ffffff",
  },
  launcher: {
    bg: "#4e8cff",
  },
  messageList: {
    bg: "#ffffff",
  },
  sentMessage: {
    bg: "#4e8cff",
    text: "#ffffff",
  },
  receivedMessage: {
    bg: "#f4f7f9",
    text: "#ffffff",
  },
  userInput: {
    bg: "#f4f7f9",
    text: "#565867",
  },
};
</script>

<style scoped lang="scss">
.issp-launcher {
  width: 60px;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  right: 25px;
  bottom: 25px;
  border-radius: 50%;
  box-shadow: none;
  transition: box-shadow 0.2s ease-in-out;
  cursor: pointer;

  :before {
    content: "";
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: box-shadow 0.2s ease-in-out;
  }

  .new-messsages-count {
    position: absolute;
    top: -3px;
    left: 41px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    background: #ff4646;
    color: white;
    text-align: center;
    margin: auto;
    font-size: 12px;
    font-weight: 500;
  }

  .closed-icon,
  .open-icon {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 25px;
    bottom: 25px;
    transition:
      opacity 100ms ease-in-out,
      transform 100ms ease-in-out;
  }

  .open-icon {
    padding: 20px;
    box-sizing: border-box;
    opacity: 1;
  }

  .open-icon,
  .closed-icon {
    transform: rotate(-90deg);
    opacity: 1;
  }

  .opened:before {
    box-shadow: 0px 0px 400px 250px rgba(148, 149, 150, 0.2);
  }

  :hover {
    box-shadow: 0 0px 27px 1.5px rgba(0, 0, 0, 0.2);
  }
}
</style>
